<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta name="chart-name" content="健康步数">
	<title>F2 图表组件库 - AntV</title>
	<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.7/f2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<style>
	.bkg {
		position: relative;
		width: 100vw;
		height: 64.26666666666667vw;
		background-image: url("https://gw.alipayobjects.com/zos/rmsportal/IiwHbXsOPCXPnjyoTXym.png");
		background-size: cover;
	}
	.avatar-container {
		position: absolute;
		left: 50%;
		width: 18.666666666666667vw;
		height: 18.666666666666667vw;
		margin-left: -9.333333333333333vw;
		border-radius: 9.333333333333333vw;
		background-color: #fff;
		text-align: center;
		overflow: hidden;
		bottom: -9.333333333333334vw;
	}
	.avatar {
		width: 13.6vw;
		height: 13.6vw;
		margin-top: 2.66666vw;
	}
	.chart-container {
		position: relative;
		margin: 12.8vw auto 0;
		height: 53.86666666666667vw;
		background-image: linear-gradient(-135deg, #874BFF 0%, #6854EE 43%, #6052F2 63%, #534FFA 100%);
		border-radius: 1.0666666666666667vw;
		overflow: hidden;
		width: 94.93333333333334vw;
	}
	.chart-header {
		height: 10.933333333333333vw;
		margin: 0 3.466666666666667vw;
		box-shadow: 0 1px 0 0 #85A5FF;
		line-height: 10.933333333333333vw;
		text-align: left;
		color: #ADC6FF;
		font-size: 5.6vw;
	}
	canvas#mountNode {
		display: block;
		width: 100%;
		height: 42.4vw;
	}
	.chart-tooltip {
		position: absolute;
		z-index: 99;
		font-size: 3.2vw;
		color: #ADC6FF;
		text-align: center;
		top: 38vw;
		left: 0;
		margin-top: 3px;
		visibility: hidden;
		transition: top 0.4s cubic-bezier(0.23, 1, 0.32, 1)
	}
</style>
<div class="bkg">
	<div class="avatar-container">
		<a href="https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html">
			<img class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/bjtEqXVNIqVCgqhpdHmm.png" alt="antv">
		</a>
	</div>
</div>
<div class="chart-container">
	<div class="chart-header"></div>
	<canvas id="mountNode"></canvas>
	<!-- 自定义 tooltip -->
	<div class="chart-tooltip" id="tooltip"></div>
</div>
<script>
	var data = [{
		date: '2018-04-21',
		steps: 59
	}, {
		date: '2018-04-22',
		steps: 2515
	}, {
		date: '2018-04-23',
		steps: 6524
	}, {
		date: '2018-04-24',
		steps: 26044
	}, {
		date: '2018-04-25',
		steps: 29763
	}, {
		date: '2018-04-26',
		steps: 10586
	}, {
		date: '2018-04-27',
		steps: 14758
	}, {
		date: '2018-04-29',
		steps: 549
	}, {
		date: '2018-04-30',
		steps: 21
	}, {
		date: '2018-05-01',
		steps: 1069
	}, {
		date: '2018-05-02',
		steps: 7918
	}, {
		date: '2018-05-03',
		steps: 5381
	}, {
		date: '2018-05-04',
		steps: 11549
	}, {
		date: '2018-05-06',
		steps: 19461
	}, {
		date: '2018-05-07',
		steps: 22487
	}, {
		date: '2018-05-08',
		steps: 11062
	}, {
		date: '2018-05-09',
		steps: 7101
	}, {
		date: '2018-05-10',
		steps: 12776
	}, {
		date: '2018-05-11',
		steps: 12919
	}, {
		date: '2018-05-12',
		steps: 7216
	}, {
		date: '2018-05-13',
		steps: 4867
	}, {
		date: '2018-05-14',
		steps: 8725
	}, {
		date: '2018-05-15',
		steps: 8983
	}, {
		date: '2018-05-16',
		steps: 22348
	}, {
		date: '2018-05-17',
		steps: 17142
	}, {
		date: '2018-05-18',
		steps: 8715
	}, {
		date: '2018-05-19',
		steps: 3861
	}, {
		date: '2018-05-20',
		steps: 8
	}, {
		date: '2018-05-21',
		steps: 24365
	}, {
		date: '2018-05-22',
		steps: 14271
	}];
	$('.chart-header').text('步数：' + data[data.length - 1].steps);
	var chart = new F2.Chart({
		id: 'mountNode',
		pixelRatio: window.devicePixelRatio,
		padding: [20, 30, 'auto', 'auto']
	});
	chart.source(data, {
		date: {
			type: 'timeCat',
			range: [0, 1],
			mask: 'MM-D'
		},
		steps: {
			ticks: [10000],
			formatter: function formatter(val) {
				return val === 10000 ? '1W' : 0;
			}
		}
	});
	chart.axis('date', {
		line: {
			stroke: '#85A5FF'
		},
		label: function label(text, index, total) {
			var cfg = {
				textAlign: 'center',
				fill: '#85A5FF',
				fontSize: 12,
				fontWeight: 300
			};
			if (index === 0) {
				cfg.textAlign = 'start';
				cfg.text = text.split('-').join('月');
			} else {
				cfg.text = text.split('-')[1];
			}
			if (index === total - 1) {
				cfg.textAlign = 'end';
				cfg.fill = '#ADC6FF';
				cfg.fontWeight = 'normal';
			}
			return cfg;
		}
	});
	chart.axis('steps', {
		position: 'right',
		label: {
			fill: '#CFFFFE',
			fillOpacity: 0.5,
			fontSize: 9,
			fontWeight: 300
		},
		grid: {
			stroke: '#85A5FF'
		}
	});
	chart.tooltip({
		custom: true,
		showCrosshairs: true,
		showTooltipMarker: false,
		crosshairsStyle: {
			lineDash: [2],
			stroke: '#77C0B3'
		},
		onChange: function onChange(e) {
			var item = e.items[0];
			var origin = item.origin;
			var tooltipEl = $('#tooltip');
			tooltipEl.text(origin.steps);
			// 设置 tooltip 位置
			var canvasOffsetTop = $('#mountNode').position().top;
			var canvasOffsetLeft = $('#mountNode').position().left;
			var tooltipWidth = tooltipEl.outerWidth();
			tooltipEl.css({
				visibility: 'visible',
				left: canvasOffsetLeft + item.x - tooltipWidth / 2,
				top: canvasOffsetTop
			});
		},
		onHide: function onHide() {
			var tooltipEl = $('#tooltip');
			tooltipEl.css({
				visibility: 'hidden'
			});
		}
	});
	chart.area().position('date*steps').style({
		fill: 'l(-90) 0.03:rgba(216,216,216,0.10) 1:#6E6CD8',
		fillOpacity: 1
	});
	chart.line().position('date*steps').color('#EFDBFF').size(1.5);
	chart.point().position('date*steps').color('#EED5FF').size(2.5);
	chart.render();
</script>
</body>
</html>